export default function useEchartMapOption(mapName) {
  const compId = mapName;

  function getOption(setting) {
    const { zoom, roam, data } = setting;
    // const option = {
    //   backgroundColor: "rgba(15, 20, 27, 1)",
    //   geo: [
    //     {
    //       show: false,
    //       map: compId,
    //     },
    //   ],
    //   series: [
    //     //地图
    //     {
    //       name: "名称",
    //       type: "map",
    //       mapType: compId,
    //       zoom, //默认显示级别
    //       roam,
    //       itemStyle: {
    //         normal: {
    //           areaColor: "#003669",
    //           borderColor: "#3fdaff",
    //           borderWidth: 2,
    //           shadowColor: "rgba(63, 218, 255,0.6)",
    //           shadowBlur: 35,
    //         },
    //       },
    //       data,
    //     },
    //   ],
    // };
    var points = [
      {
        name: "北京市",
        value: [130, 42],
      },
      {
        name: "广州市",
        value: [120, 42],
      },
      // { value: [118.8062, 31.9208], itemStyle: { color: "#4ab2e5" } },
      // { value: [127.9688, 45.368], itemStyle: { color: "#4fb6d2" } },
    ];
    let option = {
      tooltip: {
        trigger: "item",
        borderWidth: 0, // 取消边框
        borderColor: "transparent", // 设置边框颜色为透明
        background: "transparent",
        extraCssText:
          "background: transparent !important; color: transparent !important;box-shadow:none;",
        position(point, params, dom, rect, size) {
          return [point[0] - size.contentSize[0] / 2, point[1] + 10];
        },
        // // 使用 formatter 自定义 tooltip 内容
        formatter: function (params) {
          // console.log("params", params);
          const mapInfo = params.data;
          const tooltipHtml = `<div style="width: 100%; height: 100%; background: red !important; color: #fff !important;">
          ${mapInfo.name}-${mapInfo.value}
      </div>`;
          return tooltipHtml;
        },
        // padding: 8,
        // enterable: true,
        // transitionDuration: 1,
        // textStyle: {
        //   color: "#fff",
        //   decoration: "none",
        // },
      },
      geo: {
        map: compId,
        aspectScale: 0.75, //长宽比
        tooltip: {
          show: true,
        },
        zoom: 1.1,
        zIndex: 99,
        roam: true,
        itemStyle: {
          normal: {
            borderColor: "rgb(147, 235, 248)",
            borderWidth: 1,
            areaColor: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(9,19,44,1)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(39,77,104,1)", // 100% 处的颜色
                },
              ],
              globalCoord: true, // 缺省为 false
            },
          },
          emphasis: {
            areaColor: "rgb(46,229,206)",
            //    shadowColor: 'rgb(12,25,50)',
            borderWidth: 0.1,
          },
        },
        label: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 16,
              color: "rgba(29,233,182,1)",
            },
          },
          emphasis: {
            textStyle: {
              color: "rgb(183,185,14)",
            },
          },
        },
        regions: [
          {
            name: "南海诸岛",
            itemStyle: {
              areaColor: "rgba(0, 10, 52, 1)",

              borderColor: "rgba(0, 10, 52, 1)",
              normal: {
                // opacity: 0,
                label: {
                  show: false,
                  color: "rgba(0,156,201,1)",
                },
              },
            },
          },
        ],
      },
      series: [
        {
          type: "effectScatter",
          coordinateSystem: "geo",
          showEffectOn: "render",
          zlevel: 1,
          rippleEffect: {
            period: 15,
            scale: 4,
            brushType: "fill",
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: "{b}",
              position: "right",
              offset: [15, 0],
              color: "rgba(29,233,182,1)",
              show: true,
            },
          },
          itemStyle: {
            normal: {
              color: "rgba(29,233,182,1)",
              shadowBlur: 10,
              shadowColor: "rgba(51,51,3,1)",
            },
          },
          symbolSize: 12,
          data: points,
        }, //地图线的动画效果
        {
          type: "lines",
          zlevel: 2,
          effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: "arrow", //箭头图标
            symbolSize: 7, //图标大小
          },
          lineStyle: {
            normal: {
              color: "rgba(222,155,6,1)",
              width: 1, //线条宽度
              opacity: 0.1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
            },
          },
          // data: [
          //   {
          //     // name: "内蒙古自治区",
          //     coords: [
          //       [118.8062, 31.9208],
          //       [119.4543, 25.9222],
          //     ],
          //     lineStyle: { color: "#4ab2e5" },
          //   },
          //   {
          //     coords: [
          //       [127.9688, 45.368],
          //       [119.4543, 25.9222],
          //     ],
          //     lineStyle: { color: "#4fb6d2" },
          //   },
          //   {
          //     coords: [
          //       [110.3467, 41.4899],
          //       [119.4543, 25.9222],
          //     ],
          //     lineStyle: { color: "#52b9c7" },
          //   },
          //   {
          //     coords: [
          //       [125.8154, 44.2584],
          //       [119.4543, 25.9222],
          //     ],
          //     lineStyle: { color: "#5abead" },
          //   },
          //   {
          //     coords: [
          //       [116.4551, 40.2539],
          //       [119.4543, 25.9222],
          //     ],
          //     lineStyle: { color: "#f34e2b" },
          //   },
          //   {
          //     coords: [
          //       [123.1238, 42.1216],
          //       [119.4543, 25.9222],
          //     ],
          //     lineStyle: { color: "#f56321" },
          //   },
          //   {
          //     coords: [
          //       [114.4995, 38.1006],
          //       [119.4543, 25.9222],
          //     ],
          //     lineStyle: { color: "#f56f1c" },
          //   },
          //   {
          //     coords: [
          //       [117.4219, 39.4189],
          //       [119.4543, 25.9222],
          //     ],
          //     lineStyle: { color: "#f58414" },
          //   },
          //   {
          //     coords: [
          //       [112.3352, 37.9413],
          //       [119.4543, 25.9222],
          //     ],
          //     lineStyle: { color: "#f58f0e" },
          //   },
          //   {
          //     coords: [
          //       [109.1162, 34.2004],
          //       [119.4543, 25.9222],
          //     ],
          //     lineStyle: { color: "#f5a305" },
          //   },
          //   {
          //     coords: [
          //       [103.5901, 36.3043],
          //       [119.4543, 25.9222],
          //     ],
          //     lineStyle: { color: "#e7ab0b" },
          //   },
          //   {
          //     coords: [
          //       [106.3586, 38.1775],
          //       [119.4543, 25.9222],
          //     ],
          //     lineStyle: { color: "#dfae10" },
          //   },
          //   {
          //     coords: [
          //       [101.4038, 36.8207],
          //       [119.4543, 25.9222],
          //     ],
          //     lineStyle: { color: "#d5b314" },
          //   },
          //   {
          //     coords: [
          //       [103.9526, 30.7617],
          //       [119.4543, 25.9222],
          //     ],
          //     lineStyle: { color: "#c1bb1f" },
          //   },
          //   {
          //     coords: [
          //       [108.384366, 30.439702],
          //       [119.4543, 25.9222],
          //     ],
          //     lineStyle: { color: "#b9be23" },
          //   },
          //   {
          //     coords: [
          //       [113.0823, 28.2568],
          //       [119.4543, 25.9222],
          //     ],
          //     lineStyle: { color: "#a6c62c" },
          //   },
          //   {
          //     coords: [
          //       [102.9199, 25.46639],
          //       [119.4543, 25.9222],
          //     ],
          //     lineStyle: { color: "#96cc34" },
          //   },
          // ],
        },
      ],
    };
    return option;
  }

  return {
    getOption,
  };
}
